<template>
    <div class="search">
       <el-form
       class="searchBox"
       >
         <el-row>
               <el-col>
                    <el-row type="flex">
                     <template v-for="(item,index) in searchlist">
                         <el-col   :xs="24" :sm="12" :md="8" :lg="5"  :key="index">
                               <!-- <el-col  :key="index"> -->
                              <el-form-item   v-if="item.type === 'select'" :label="item.label">
                                    <el-select v-model="item.model" :placeholder="item.placeholder">
                                      <el-option
                                        v-for="item in item.options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                      </el-option>
                                    </el-select>
                              </el-form-item>
                               <el-form-item  v-if="item.type === 'time'" :label="item.label">
                                     <el-date-picker
                                        v-model="item.model"
                                        type="date"
                                        :placeholder="item.placeholder">
                                      </el-date-picker>
                              </el-form-item>
                         </el-col>
                     </template> 
                     <el-col :xs="24" :sm="12" :md="8" :lg="5">
                           <el-button   @click="okbtn(item.fun)" class="btn"  :class="item.colorok  ? 'okbtn' : ''"  v-for="(item,index) in keylist" :key="index" >{{item.name}}</el-button>
                     </el-col>    
                 </el-row>
               </el-col>    
         </el-row>
       </el-form>
    </div>
</template>
<script>
export default {
    name:'seatchfrom',
    props:{
        searchlist:{
            type:Array
            
        },
        keylist:{
             type:Array

        }
    },
    methods:{
        okbtn(value){
            this.$emit('search')
        }
    }
    
}
</script>
<style lang="less" scoped>
.search {
    height: 50px;
}
.okbtn {
    border: 0;
    background-color: #009481!important;
    color: #FFFFFF!important;
}

</style>
